<template>
	<view>
		<view class="header">
			<view class="money">{{account.money}}</view>
			<view>账户余额(元)</view>
		</view>
		
		<view class="section">
			<uni-section title="基本信息" type="line" class="title">
				<text class="tag" v-if="account.status==1">正常</text>
				<text class="tag1" v-if="account.status==0">停缴</text>
			</uni-section>
			<view class="box">
				<view class="box-item">
					<view class="left">姓名</view>
					<view class="right">{{account.name}}</view>
				</view>
				<view class="box-item">
					<view class="left">证件号码</view>
					<view class="right">{{account.idcard}}</view>
				</view>
				<view class="box-item">
					<view class="left">缴存单位</view>
					<view class="right">{{account.company}}</view>
				</view>
				<view class="box-item">
					<view class="left">手机号码</view>
					<view class="right">{{account.tel}}</view>
				</view>
				<view class="box-item">
					<view class="left">账户状态</view>
					<view class="right">{{account.status==1?'正常':'停缴'}}</view>
				</view>
			</view>
			
		</view>
		<view class="section">
			<uni-section title="缴存信息" type="line" class="title">
			</uni-section>
			<view class="box">
				<view class="box-item">
					<view class="left">缴存基数(元)</view>
					<view class="right">{{accountDetail.base_line}}元</view>
				</view>
				<view class="box-item">
					<view class="left">个人缴存比例</view>
					<view class="right">{{accountDetail.personal_rate}}</view>
				</view>
				<view class="box-item">
					<view class="left">单位缴存比例</view>
					<view class="right">{{accountDetail.company_rate}}</view>
				</view>
				<view class="box-item">
					<view class="left">个人月缴额</view>
					<view class="right">{{accountDetail.personal_money}}元</view>
				</view>
				<view class="box-item">
					<view class="left">单位月缴额</view>
					<view class="right">{{accountDetail.company_money}}元</view>
				</view>
				<view class="box-item">
					<view class="left">缴至月份</view>
					<view class="right">{{accountDetail.last_month}}</view>
				</view>
			</view>
			
			<!-- <uni-list border="false">
				<uni-list-item title="缴存基数(元)" border="false" rightText="张三"></uni-list-item>
				<uni-list-item title="个人缴存比例"  rightText="1231231231231"></uni-list-item>
				<uni-list-item title="单位缴存比例"  rightText="1231231231231"></uni-list-item>
				<uni-list-item title="个人月缴额"  rightText="1231231231231"></uni-list-item>
				<uni-list-item title="单位月缴额"  rightText="120.00元"></uni-list-item>
				<uni-list-item title="缴至月份"  rightText="2020年11月"></uni-list-item>
			</uni-list> -->
		</view>
		<view class="logout">
			<button size="mini" plain="true" @click="logout">退出登录</button>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	var host = app.globalData.host,
		urls = app.globalData.urls;
	import uniCard from "@/components/uni-card/uni-card.vue"
	import uniSection from "@/components/uni-section/uni-section.vue"
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	export default {
		onLoad(){
			var userInfo = uni.getStorageSync("setUserData"),that=this
			if(!userInfo){
				uni.reLaunch({
					url:"../login/login"
				})
			}
			let account = uni.getStorageSync('account')
			console.log('000',account)
			that.account = account
			
			uni.request({
					url:host+urls.accountDetail,
					data:{
						partner_id:userInfo.id
					},
					method:'GET',
					success(res) {
						console.log('-------',res)
						that.accountDetail = res.data.data
					}
				})
			
		},
		data(){
			return {
				account:{
					'name':'--',
					'idcard':'--',
					'company':'--',
					'tel':'--',
					'status':0
				},
				accountDetail:{
					'base_line':'0.00',
					'personal_rate':'0.00%',
					'company_rate':'0.00%',
					'personal_money':'0.00',
					'company_money':'0.00',
					'last_month':'--'
				}
			}
		},
		methods:{
			logout(){
				uni.clearStorageSync()
				uni.reLaunch({
					url:'../index/index'
				})
			}
		},
		comments:{
			uniCard,
			uniSection,
			uniList,
			uniListItem
		}
	}
</script>

<style>
	.logout{
		text-align: center;
		margin: 200rpx 0 100rpx 0;
	}
	.logout button{
		border: none;
		background-color: #2196F3;
		color: #ffffff;
		width: 50%;
		height: 90rpx;
		line-height: 90rpx;
	}
	.line{
		background-color: #2196f3 !important;
	}
	.header{
		background-color: #2196f3;
		height: 180rpx;
		color: #ffffff;
		text-align: center;padding: 80rpx;
	}
	.header .money{
		font-size: 42rpx;
		font-weight: bold;
		margin: 20rpx 0;
		margin-top: 45rpx;
	}
	.header .user{
		font-size: 28rpx;
		margin: 20rpx 0;
	}
	.user text{
		margin: 0 20rpx;
	}
	.btn{
		margin-top: 20rpx;
	}
	.btn button{
		width: 300rpx;
		border: 2rpx solid #ffffff;
		border-radius: 50rpx;
		padding: 5rpx 0;
		font-size: 26rpx;
		color: #ffffff;
		
	}
	.section{
		margin-bottom: 30rpx;
	}
	.title{
		background-color: #ffffff;
		border-bottom: 2rpx solid #eee;
	}
	.tag{
		padding:0 5rpx;
		border: 2rpx solid #83DC42;
		font-size: 26rpx;
		color: #83DC42;
	}
	.tag1{
		padding:0 5rpx;
		border: 2rpx solid #F9221D;
		font-size: 26rpx;
		color: #F9221D;
	}
	.box{
		padding: 20rpx;
		color: #555555;
	}
	.box-item{
		width: 100%;
		padding: 10rpx 0;
	}
	.box-item .left{
		float: left;
	}
	.box-item .right{
		text-align: right;
		/* float: right; */
	}
</style>
